<!--应聘简历-->
<template>
  <div>
    <div class="hearder-search">
      <el-radio-group v-model="tabPosition" size="small" @change="tabPositionFn">
        <el-radio-button label="class">班级出勤率</el-radio-button>
        <el-radio-button label="teacher">教职工出勤率</el-radio-button>
      </el-radio-group>
      <div class="breadcrumb-container">
        <div v-show="tabPosition=='class'">
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <el-date-picker
            v-model="addtime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            :picker-options="pickerOptions1"
            class="mr-10"
            @change="timeChange">
        </el-date-picker>
        <el-input v-model="searchForm.number" placeholder="缺勤次数" size="small"
                  class="w-140" v-if="tabPosition=='student'"></el-input>
        <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i class="el-icon-search"></i>搜索
        </el-button>
        <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        <el-button size="small" class="ml-10" v-if="!searchForm.start_time" disabled>导出出勤率记录</el-button>
        <div v-else class="ml-10">
          <downexcel type="attendanceClass" :option="searchForm" v-if="tabPosition=='class'"></downexcel>
          <downexcel type="attendanceTeacher" :option="searchForm" v-if="tabPosition=='teacher'"></downexcel>
        </div>
      </div>
    </div>
    <div class="tips-info-box mb-10">当天出勤记录，隔天才可搜索导出</div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :border="tableoption.tableBorder"
            tooltip-effect="dark">
          <el-table-column
              align="center"
              label="序号"
              width="80">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
              label="班级"
              align="center"
              prop="name"
              :key="1"
              v-if="tabPosition=='class'">
            <template slot-scope="scope">
              {{ scope.row.classes ? scope.row.classes.class_name : '--' }}
            </template>
          </el-table-column>
          <el-table-column
              label="应到人数"
              align="center"
              prop="count_number"
              :key="2">
          </el-table-column>
          <el-table-column
              label="实到人数"
              align="center"
              prop="in_number"
              :key="3">
          </el-table-column>
          <el-table-column
              label="未到人数"
              align="center"
              prop="name"
              :key="4">
            <template slot-scope="scope">
              {{ scope.row.count_number - scope.row.in_number }}
            </template>
          </el-table-column>
          <el-table-column
              label="出勤率"
              align="center"
              prop="attendance"
              :key="5">
          </el-table-column>
          <el-table-column
              label="记录时间"
              align="center"
              prop="create_time"
              :key="11">
          </el-table-column>
        </el-table>
        <!--工具条 分页-->
        <el-col :span="24" class="toolbar">
          <el-pagination
              background
              :page-size="page.pagesize"
              :current-page="page.pageindex"
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleSizeChange"></el-pagination>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'


export default {
  components: {},
  data() {
    return {
      tabPosition: 'class',
      addtime: [],
      pickerOptions1: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e7 // 不包括今天
          return time.getTime() > Date.now()
        }
      },
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      searchForm: {
        start_time: '',
        end_time: '',
        class_id: '',
        section_id: ''
      },
      downStudent: {},
      downTeacher: {},
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let option_ = {};
      console.log('数据内容====================>>>', option_)
      if (this.tabPosition === 'class') {
        option_ = {
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
          class_id: this.searchForm.class_id,
          section_id: this.searchForm.section_id,
        }
        this.downStudent = this.getJson(option_);
      } else {
        option_ = {
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
        }
        this.downTeacher = this.getJson(option_);
      }
      option_.p = this.page.pageindex;
      let data = await this.$fetch(this.tabPosition === 'class' ? this.api.classActive.attendance.class.now : this.api.classActive.attendance.teacher.now, option_);
      console.log('接口回执：', data)
      if(!data.code){
        for(let item of data.list){
          item.attendance = item.count_number?((item.in_number/item.count_number)*100).toFixed(2)+'%': ''
          item.create_time = item.create_time.split(' ')[0]
        }
        this.arryList = data.list;
        this.page.total = data.list.length;
      }
    },
    async searchListFn(){
      let option_ = {};
      console.log('数据内容====================>>>', option_)
      if (this.tabPosition === 'class') {
        option_ = {
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
          class_id: this.searchForm.class_id,
          section_id: this.searchForm.section_id,
        }
        this.downStudent = this.getJson(option_);
      } else {
        option_ = {
          start_time: this.searchForm.start_time,
          end_time: this.searchForm.end_time,
        }
        this.downTeacher = this.getJson(option_);
      }
      option_.p = this.page.pageindex;
      let data = await this.$fetch(this.tabPosition === 'class' ? this.api.classActive.attendance.class.index : this.api.classActive.attendance.teacher.index, option_);
      console.log('接口回执：', data)
      if(!data.code){
        for(let item of data.list.data){
          item.attendance = item.count_number?((item.in_number/item.count_number)*100).toFixed(2)+'%': ''
          item.create_time = item.create_time.split(' ')[0]
        }
        this.arryList = data.list.data;
        this.page.total = data.list.total;
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.searchListFn()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    searchFn(option) {
      console.log(this.addtime)
      this.arryList = []
      this.page.pageindex = 1;
      if (option === 'refresh') {
        this.addtime = []
        this.searchForm.start_time = ''
        this.searchForm.end_time = ''
        this.searchForm.number = ''
        this.searchForm.student_name = ''
        this.searchForm.class_id = ''
        this.searchForm.section_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
        this.InitFn()
      } else {
        if (this.addtime) {
          if (this.addtime.length) {
            this.searchForm.start_time = this.addtime[0];
            this.searchForm.end_time = this.addtime[1];
          } else {
            this.searchForm.start_time = '';
            this.searchForm.end_time = '';
          }
        } else {
          this.searchForm.start_time = '';
          this.searchForm.end_time = '';
        }
        if (!this.searchForm.start_time) {
          this.$message.error('请选择缺勤时间段')
          return
        }
        this.searchListFn()
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    timeChange() {
      console.log('addtime', this.addtime)
      if (this.addtime) {
        if (this.addtime.length) {
          this.searchForm.start_time = this.addtime[0];
          this.searchForm.end_time = this.addtime[1];
        }
      } else {
        this.searchForm.start_time = '';
        this.searchForm.end_time = '';
      }
    },
    tabPositionFn() {
      this.addtime = [];
      this.arryList = [];
      this.searchForm.start_time = '';
      this.searchForm.end_time = '';
      if(this.tabPosition === 'teacher'){
        this.searchForm.class_id = '';
        this.searchForm.section_id = '';
      }
      this.InitFn()
    }
  },
  mounted() {
  }
}
</script>
<style>
.tips-info-box {
  font-size: 12px;
  color: #777;
}
</style>
